Macro Modules | Nav Pagination

Showing 1-10 of 60 Results

HTML

<div class="nav-pagination nav-pagination--top u-cf js-nav-pagination" aria-label="Pagination navigation">
            
            
                    <div class="nav-pagination__col-left">
                        <span class="nav-pagination__results-count">Showing 1-10 of 60 Results</span>
            
                    </div>
            
                    <div class="nav-pagination__col-right">
            
                    </div>
            
            
            </div> <!-- .nav-pagination -->

Notes

Nav Pagination

Templates this appears on:

Macro Modules this appears on:

Nav Pagination Mwph

Showing 1-10 of 60 Results

Sort By

HTML

<div class="nav-pagination nav-pagination--top nav-pagination--sort u-cf js-nav-pagination" aria-label="Pagination navigation">
            
            
                    <div class="nav-pagination__col-left">
                        <span class="nav-pagination__results-count">Showing 1-10 of 60 Results</span>
            
                    </div>
            
                    <div class="nav-pagination__col-right">
            
                        <div class="nav-pagination__sort">
                            <div class="filter__input">
                                <label class="filter__label" for="relevance">Sort By</label>
                                <div class="select icon-triangle-red-s">
                                    
            
                                    <form action="/kittens" method="post" name="search-sort-form">
                                        <input type="hidden" id="qtext" name="qtext" value="Pediatric Neurology" />
                                        <input type="hidden" id="q" name="q" value="Pediatric Neurology" />
                                        <input type="hidden" id="qtype" name="qtype" value="" />
                                        <input type="hidden" id="si" name="si" value="bwmc" />
                                        <input type="hidden" id="pc" name="pc" />
                                        <input type="hidden" id="spec" name="spec" />
                                        <input type="hidden" id="zip" name="zip" />
                                        <input type="hidden" id="entity" name="entity" />
                                        <input type="hidden" id="medicalgroup" name="medicalgroup" />
                                        <input type="hidden" id="loc" name="loc" value="" />
                                        <input type="hidden" id="lang" name="lang" />
                                        <input type="hidden" id="g" name="g" />
                                        <input type="hidden" id="perpage" name="perpage" value="10" />
                                        <input type="hidden" id="page" name="page" value="1" />
                                        <input type="hidden" class="js-fad-lat" name="lat" id="lat" value="">
                                        <input type="hidden" class="js-fad-long" name="long" id="long" value="">
                                        <input type="hidden" class="js-fad-address" name="address" id="address">
                                        <input type="hidden" name="virtualvisits" id="virtualvisits" value="false">
                                        <input type="hidden" name="acceptnew" id="acceptnew" value="false">
                                        <input type="hidden" name="opensched" id="opensched" value="false">
                                        <input type="hidden" id="dist" name="dist" value="200" />
            
                                        <select id="relevance" class="js-fad-sort-handle" name="relevance" role='listbox' aria-label='sort by'>
                                            
                                            <option value="A-Z">A-Z</option>
                                            <option value="Z-A">Z-A</option>
                                            <option value="Distance">Distance</option>
                                        </select>
                                        <input class="js-fad-sort" type="hidden">
                                    </form>
                                </div>
                            </div><!-- .filter__input -->
                        </div>
                    </div>
            
            
            </div> <!-- .nav-pagination -->

Notes

Nav Pagination

Templates this appears on:

Showing 1-10 of 60 Results

Results per Page

HTML

<div class="nav-pagination nav-pagination--bottom u-cf js-nav-pagination" aria-label="Pagination navigation">
            
            
                    <div class="nav-pagination__col-left">
                        <span class="nav-pagination__results-count">Showing 1-10 of 60 Results</span>
            
                        <div class="nav-pagination__results-count-select">
                            <span class="nav-pagination__select icon-triangle-red-s">
                                <select class="js-nav-pagination-select" aria-label='page results'>
                                    <option value="10" data-pagination-count="10">10</option>
                                    <option value="25" data-pagination-count="25">25</option>
                                    <option value="50" data-pagination-count="50">50</option>
                                </select>
                            </span>
                            <span class="nav-pagination__text">Results per Page</span>
                        </div>
                    </div>
            
                    <div class="nav-pagination__col-right">
                        <div class="nav-pagination__page-nav">
                            <ul>
                                <li><a href="" class="nav-pagination__back icon-triangle-red-w u-visuallyhidden"><span class="u-visuallyhidden">Previous</span></a></li>
                                <li><a href="#" class="nav-pagination__num is-active">1</a></li>
                                <li><a href="#" class="nav-pagination__num">2</a></li>
                                <li><a href="#" class="nav-pagination__num">3</a></li>
                                <li><a href="#" class="nav-pagination__next icon-triangle-red-e"><span class="u-visuallyhidden">Next</span></a></li>
                            </ul>
                        </div>
            
                    </div>
            
            
            </div> <!-- .nav-pagination -->

Notes

Nav Pagination

Templates this appears on:

Nav Pagination - Top

HTML

Notes

Nav Pagination - Top w/ Sort

HTML

Notes

Nav Pagination - Bottom

HTML

Notes